<template>
    <van-index-bar :index-list="cityGroupIndex">

        <!-- HOT城市列表 -->
        <van-index-anchor index="热门" />
        <div class="hotCityList">
            <template v-for="(hotCity,index) in cityGroupData.hotCities" :key="index">
                <div class="hotCityItem" @click="cityClick(hotCity)">{{hotCity.cityName}}</div>
            </template>

        </div>

        <!-- 第一层遍历 (A,B,C...标题)-->
        <template v-for="(group,index) in cityGroupData.cities" :key="index">

            <van-index-anchor :index="group.group" />
            <!-- 第二层遍历 (城市...名称)-->
            <template v-for="(city,idx) in group.cities" :key="idx">

                <van-cell :title="city.cityName" @click="cityClick(city)" />

            </template>
        </template>
    </van-index-bar>
</template>

<script setup>
import useCityStore from '@/stores/modules/cityStore';
import { computed } from 'vue'
import { useRouter } from 'vue-router';

//定义props
const props = defineProps({
    cityGroupData: {
        type: Object,
        default: () => ({})
    }
})

//动态索引
const cityGroupIndex = computed(() => {
    /* 通过map 遍历并返回索引 */
    const index = props.cityGroupData.cities.map(item => item.group)
    //在前面加上#号
    index.unshift('#')
    return index
})

//点击城市的事件
const router = useRouter()
const cityClick = (city) => {

    const cityStore = useCityStore()
    cityStore.currentCity = city
    console.log(cityStore.currentCity);
    router.back()
}



</script>

<style lang="less" scoped>
.hotCityList {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    padding-right: 25px;
    background-color: #fff;

    .hotCityItem {
        width: 70px;
        height: 28px;
        border-radius: 14px;
        font-size: 12px;
        text-align: center;
        line-height: 28px;
        color: #000;
        background-color: #fff4ec;
        margin: 6px;
    }





}
</style>